<template>
  <el-dialog
    class="set-progress-mark-model"
    :show-close="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(980)"
    :before-close="handleCancel">
    <span slot="title" class="progress-title">
      <span>总形象进度</span>
        <el-button size="small" type="primary" @click="handleAdd" icon="el-icon-plus">
          新增
        </el-button>
    </span>
    <el-table
      class="table-container"
      :data="tableData"
      v-loading="tableLoading"
      element-loading-custom-class="custom-load"
      row-key="uuid">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="任务名称" prop="labelName" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column label="形象进度定位" prop="locationStr"></el-table-column>
      <el-table-column label="备注" prop="remark" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <span class="prim-btn" @click="handleEdit(scope.row)">编辑</span>
          <span class="dar-btn" @click="handleDelete(scope.row)">删除</span>
        </template>
      </el-table-column>
      <div class="empty-content" slot="empty">
        <i class="iconfont iconwushuju"></i>
        <p>暂无数据</p>
      </div>
    </el-table>
    <el-pagination
      v-if="total > 10"
      :page-size="pageSize"
      :current-page="pageNo"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <set-progress-mark
      :visible="addVisible"
      :type="type"
      :scheduleType="scheduleType"
      :projectId="projectId"
      :options="currentData"
      :loading="loading"
      @save="handleSave"
      @cancel="addVisible = false">
    </set-progress-mark>
    <span class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import setProgressMark from '@/components/project/progress/setProgressMark';

export default {
  components: {
    setProgressMark
  },
  props: {
    projectId: {
      type: String,
      default: ''
    },
    scheduleType: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      currentData: {},
      addVisible: false,
      type: '',
      loading: false,
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
      }
    }
  },
  methods: {
    // 获取标签列表数据
    async getTableData() {
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getProgressLabelList({
        pageSize: this.pageSize,
        pageNum: this.pageNo,
        scheduleType: this.scheduleType,
        projectId: this.projectId
      });
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          const { pointPosition } = item;
          let locationStr = '';
          try {
            const locationJson = pointPosition
              ? JSON.parse(pointPosition)
              : '';
            Object.keys(locationJson).forEach((key, i) => {
              locationStr += `${i !== 0 ? '，' : ''}${key}：${locationJson[key]}`;
            });
          } catch (e) {}
          return {
            ...item,
            locationStr
          };
        });
        this.total = data.total || 0;
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    // 新增
    handleAdd() {
      this.currentData = {};
      this.type = 'add';
      this.addVisible = true;
    },
    // 编辑
    handleEdit(row) {
      this.currentData = { ...row };
      this.type = 'edit';
      this.addVisible = true;
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delProgressLabel({
          ids: row.id
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    },
    async handleSave(data) {
      const { location, ...options } = data;
      let pointPosition = '';
      try {
        pointPosition = location ? JSON.stringify(location) : '';
      } catch (e) {}
      const params = {
        ...options,
        pointPosition,
        projectId: this.projectId
      };
      const hasAdd = this.type === 'add';
      if (hasAdd) delete params.id;
      this.loading = true;
      const { success } = hasAdd
        ? await this.$Model.addProgressLabel(params)
        : await this.$Model.updateProgressLabel(params);
      this.loading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getTableData();
        this.addVisible = false;
      }
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', true);
    },
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  .set-progress-mark-model {
    .progress-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .table-container {
      /deep/ .el-table__body-wrapper {
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      margin: 10px 0;
    }
  }
</style>
